<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>会员列表 - 社交平台</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    body {
      background-color: #f8f9fa;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      padding-bottom: 70px;
    }
    
    /* 顶部导航 */
    .navbar {
      box-shadow: 0 2px 8px rgba(0,0,0,0.08);
      z-index: 1050;
    }
    
    /* 会员卡片样式 */
    .member-card {
      transition: transform 0.2s, box-shadow 0.2s;
      height: 100%;
    }
    
    .member-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 8px 16px rgba(0,0,0,0.1);
    }
    
    /* 无图片时的替代样式 */
    .no-image {
      background-color: #e3f2fd;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #1976d2;
      font-size: 32px;
    }
    
    /* 多图展示样式 */
    .multi-images {
      position: relative;
      height: 100%;
    }
    
    .multi-images img:nth-child(2) {
      position: absolute;
      top: 0;
      right: 0;
      width: 50%;
      height: 50%;
      border-left: 2px solid white;
      border-bottom: 2px solid white;
    }
    
    /* 列表项样式 */
    .member-list-item {
      transition: background-color 0.2s;
    }
    
    .member-list-item:hover {
      background-color: #f0f7ff;
    }
    
    /* 底部导航 */
    .bottom-nav {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: white;
      box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
      z-index: 1040;
    }
    
    /* 标签样式 */
    .member-tag {
      font-size: 11px;
      padding: 2px 8px;
      border-radius: 10px;
    }
    
    /* 加载动画 */
    .loader {
      width: 20px;
      height: 20px;
      border: 2px solid #ddd;
      border-bottom-color: #3b82f6;
      border-radius: 50%;
      animation: spin 1s linear infinite;
    }
    
    @keyframes spin {
      to { transform: rotate(360deg); }
    }
    
    /* 筛选面板 */
    .filter-panel {
      position: fixed;
      top: 56px;
      left: 0;
      right: 0;
      background-color: white;
      z-index: 1030;
      transform: translateY(-100%);
      transition: transform 0.3s ease;
    }
    
    .filter-panel.active {
      transform: translateY(0);
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }
    
    /* 遮罩层 */
    .overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0,0,0,0.5);
      z-index: 1020;
      display: none;
    }
    
    .overlay.active {
      display: block;
    }
  </style>
</head>
<body>
  <!-- 顶部导航栏 -->
  <nav class="navbar navbar-light bg-white fixed-top">
    <div class="container-fluid px-4">
      <button class="btn btn-link p-0 me-2" type="button">
        <i class="fa fa-arrow-left text-dark"></i>
      </button>
      <h5 class="navbar-brand mb-0 fw-bold flex-grow-1 text-center">会员列表</h5>
      <button id="filterBtn" class="btn btn-link p-0" type="button">
        <i class="fa fa-filter text-dark"></i>
      </button>
    </div>
  </nav>

  <!-- 筛选面板 -->
  <div id="filterPanel" class="filter-panel">
    <div class="p-4">
      <div class="d-flex justify-content-between align-items-center mb-4">
        <h6 class="fw-bold">高级筛选</h6>
        <button id="closeFilterBtn" class="btn btn-link p-0">
          <i class="fa fa-times text-dark"></i>
        </button>
      </div>
      
      <!-- 筛选选项 -->
      <div class="mb-4">
        <label class="form-label text-sm fw-medium mb-2">性别</label>
        <div class="d-flex gap-3">
          <label class="d-flex align-items-center">
            <input type="radio" name="gender" class="form-check-input me-2" checked> 全部
          </label>
          <label class="d-flex align-items-center">
            <input type="radio" name="gender" class="form-check-input me-2"> 男
          </label>
          <label class="d-flex align-items-center">
            <input type="radio" name="gender" class="form-check-input me-2"> 女
          </label>
        </div>
      </div>
      
      <div class="mb-4">
        <label class="form-label text-sm fw-medium mb-2">年龄范围</label>
        <div class="row gap-2">
          <div class="col-6">
            <select class="form-select form-select-sm">
              <option>最小 18</option>
              <option>20</option>
              <option>25</option>
              <option>30</option>
            </select>
          </div>
          <div class="col-6">
            <select class="form-select form-select-sm">
              <option>最大 60</option>
              <option>30</option>
              <option>35</option>
              <option>40</option>
            </select>
          </div>
        </div>
      </div>
      
      <div class="mb-4">
        <label class="form-label text-sm fw-medium mb-2">距离范围</label>
        <select class="form-select form-select-sm">
          <option>不限</option>
          <option>1公里内</option>
          <option>3公里内</option>
          <option>5公里内</option>
          <option>10公里内</option>
          <option>20公里内</option>
        </select>
      </div>
      
      <div class="mb-4">
        <label class="form-label text-sm fw-medium mb-2">活跃状态</label>
        <select class="form-select form-select-sm">
          <option>全部</option>
          <option>在线</option>
          <option>今天活跃</option>
          <option>本周活跃</option>
        </select>
      </div>
      
      <div class="mb-4">
        <label class="form-label text-sm fw-medium mb-2">技能标签</label>
        <div class="flex-wrap d-flex gap-2">
          <span class="badge bg-primary">摄影</span>
          <span class="badge bg-secondary">音乐</span>
          <span class="badge bg-secondary">编程</span>
          <span class="badge bg-secondary">美食</span>
          <span class="badge bg-secondary">运动</span>
          <span class="badge bg-secondary">设计</span>
          <span class="badge bg-secondary">语言</span>
          <span class="badge bg-secondary">更多</span>
        </div>
      </div>
      
      <div class="d-flex gap-3 mt-5">
        <button class="btn btn-outline-secondary flex-grow-1">重置</button>
        <button class="btn btn-primary flex-grow-1">确认筛选</button>
      </div>
    </div>
  </div>
  
  <!-- 遮罩层 -->
  <div id="overlay" class="overlay"></div>

  <!-- 主内容区 -->
  <div class="container-fluid px-4" style="margin-top: 56px;">
    <!-- 搜索和视图切换 -->
    <div class="row align-items-center mb-4">
      <div class="col-8">
        <div class="input-group">
          <span class="input-group-text bg-white border-end-0">
            <i class="fa fa-search text-secondary"></i>
          </span>
          <input type="text" class="form-control border-start-0" placeholder="搜索会员或技能..." aria-label="搜索会员">
        </div>
      </div>
      <div class="col-4">
        <div class="btn-group btn-group-sm float-end">
          <button id="gridViewBtn" class="btn btn-primary">
            <i class="fa fa-th-large"></i>
          </button>
          <button id="listViewBtn" class="btn btn-light">
            <i class="fa fa-list"></i>
          </button>
          <button id="mapViewBtn" class="btn btn-light">
            <i class="fa fa-map-marker"></i>
          </button>
        </div>
      </div>
    </div>
    
    <!-- 快捷分类筛选 -->
    <div class="overflow-x-auto mb-4 pb-2">
      <div class="d-flex gap-2" style="width: max-content;">
        <button class="btn btn-primary rounded-pill px-4">全部会员</button>
        <button class="btn btn-light rounded-pill px-4">新加入</button>
        <button class="btn btn-light rounded-pill px-4">活跃会员</button>
        <button class="btn btn-light rounded-pill px-4">技能达人</button>
        <button class="btn btn-light rounded-pill px-4">认证会员</button>
        <button class="btn btn-light rounded-pill px-4">附近的人</button>
      </div>
    </div>
    
    <!-- 网格视图 (默认显示) -->
    <div id="gridView">
      <div class="row gap-3 mb-5">
        <!-- 会员1 - 单张图片 -->
        <div class="col-6">
          <div class="card member-card rounded-3 overflow-hidden">
            <div style="height: 140px;">
              <img src="https://picsum.photos/300/300?random=1" class="w-100 h-100 object-cover" alt="会员照片">
            </div>
            <div class="p-3">
              <div class="d-flex justify-content-between align-items-start">
                <h6 class="fw-bold mb-0">李明</h6>
                <span class="member-tag bg-primary text-white">摄影</span>
              </div>
              <p class="text-xs text-secondary mt-1">2公里 · 在线</p>
              <p class="text-sm mt-2 line-clamp-2">擅长人像摄影，希望交换学习吉他技能</p>
              <div class="d-flex justify-content-between mt-3">
                <button class="btn btn-sm btn-outline-primary rounded-pill px-3">关注</button>
                <button class="btn btn-sm btn-primary rounded-pill px-3">私信</button>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 会员2 - 无图片 -->
        <div class="col-6">
          <div class="card member-card rounded-3 overflow-hidden">
            <div class="no-image" style="height: 140px;">
              <i class="fa fa-user"></i>
            </div>
            <div class="p-3">
              <div class="d-flex justify-content-between align-items-start">
                <h6 class="fw-bold mb-0">王芳</h6>
                <span class="member-tag bg-success text-white">音乐</span>
              </div>
              <p class="text-xs text-secondary mt-1">5公里 · 1小时前</p>
              <p class="text-sm mt-2 line-clamp-2">钢琴教师，想学习英语口语交流</p>
              <div class="d-flex justify-content-between mt-3">
                <button class="btn btn-sm btn-outline-primary rounded-pill px-3">关注</button>
                <button class="btn btn-sm btn-primary rounded-pill px-3">私信</button>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 会员3 - 多张图片 -->
        <div class="col-6">
          <div class="card member-card rounded-3 overflow-hidden">
            <div style="height: 140px;" class="multi-images">
              <img src="https://picsum.photos/300/300?random=3" class="w-100 h-100 object-cover" alt="会员照片1">
              <img src="https://picsum.photos/300/300?random=4" class="object-cover" alt="会员照片2">
            </div>
            <div class="p-3">
              <div class="d-flex justify-content-between align-items-start">
                <h6 class="fw-bold mb-0">张伟</h6>
                <span class="member-tag bg-info text-white">编程</span>
              </div>
              <p class="text-xs text-secondary mt-1">1公里 · 30分钟前</p>
              <p class="text-sm mt-2 line-clamp-2">前端开发，可教JavaScript，想学架子鼓</p>
              <div class="d-flex justify-content-between mt-3">
                <button class="btn btn-sm btn-outline-primary rounded-pill px-3">关注</button>
                <button class="btn btn-sm btn-primary rounded-pill px-3">私信</button>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 会员4 - 单张图片 -->
        <div class="col-6">
          <div class="card member-card rounded-3 overflow-hidden">
            <div style="height: 140px;">
              <img src="https://picsum.photos/300/300?random=5" class="w-100 h-100 object-cover" alt="会员照片">
            </div>
            <div class="p-3">
              <div class="d-flex justify-content-between align-items-start">
                <h6 class="fw-bold mb-0">赵丽</h6>
                <span class="member-tag bg-warning text-white">美食</span>
              </div>
              <p class="text-xs text-secondary mt-1">8公里 · 离线</p>
              <p class="text-sm mt-2 line-clamp-2">专业厨师，擅长川菜，想学街舞</p>
              <div class="d-flex justify-content-between mt-3">
                <button class="btn btn-sm btn-outline-primary rounded-pill px-3">关注</button>
                <button class="btn btn-sm btn-primary rounded-pill px-3">私信</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 列表视图 (默认隐藏) -->
    <div id="listView" class="d-none">
      <div class="space-y-3 mb-5">
        <!-- 会员1 - 单张图片 -->
        <div class="bg-white rounded-3 p-3 member-list-item">
          <div class="d-flex">
            <div style="width: 80px; height: 80;" class="me-3 flex-shrink-0">
              <img src="https://picsum.photos/300/300?random=1" class="w-100 h-100 rounded-2 object-cover" alt="会员照片">
            </div>
            <div class="flex-grow-1">
              <div class="d-flex justify-content-between">
                <h6 class="fw-bold">李明</h6>
                <span class="member-tag bg-primary text-white">摄影</span>
              </div>
              <p class="text-xs text-secondary">2公里 · 在线</p>
              <p class="text-sm text-secondary mt-1 line-clamp-1">擅长人像摄影，希望交换学习吉他技能</p>
              <div class="d-flex gap-2 mt-2">
                <button class="btn btn-sm btn-outline-primary rounded-pill px-3">关注</button>
                <button class="btn btn-sm btn-primary rounded-pill px-3">私信</button>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 会员2 - 无图片 -->
        <div class="bg-white rounded-3 p-3 member-list-item">
          <div class="d-flex">
            <div class="no-image" style="width: 80px; height: 80;" class="me-3 flex-shrink-0 rounded-2">
              <i class="fa fa-user"></i>
            </div>
            <div class="flex-grow-1">
              <div class="d-flex justify-content-between">
                <h6 class="fw-bold">王芳</h6>
                <span class="member-tag bg-success text-white">音乐</span>
              </div>
              <p class="text-xs text-secondary">5公里 · 1小时前</p>
              <p class="text-sm text-secondary mt-1 line-clamp-1">钢琴教师，想学习英语口语交流</p>
              <div class="d-flex gap-2 mt-2">
                <button class="btn btn-sm btn-outline-primary rounded-pill px-3">关注</button>
                <button class="btn btn-sm btn-primary rounded-pill px-3">私信</button>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 会员3 - 多张图片 -->
        <div class="bg-white rounded-3 p-3 member-list-item">
          <div class="d-flex">
            <div style="width: 80px; height: 80;" class="me-3 flex-shrink-0 multi-images rounded-2 overflow-hidden">
              <img src="https://picsum.photos/300/300?random=3" class="w-100 h-100 object-cover" alt="会员照片1">
              <img src="https://picsum.photos/300/300?random=4" class="object-cover" alt="会员照片2">
            </div>
            <div class="flex-grow-1">
              <div class="d-flex justify-content-between">
                <h6 class="fw-bold">张伟</h6>
                <span class="member-tag bg-info text-white">编程</span>
              </div>
              <p class="text-xs text-secondary">1公里 · 30分钟前</p>
              <p class="text-sm text-secondary mt-1 line-clamp-1">前端开发，可教JavaScript，想学架子鼓</p>
              <div class="d-flex gap-2 mt-2">
                <button class="btn btn-sm btn-outline-primary rounded-pill px-3">关注</button>
                <button class="btn btn-sm btn-primary rounded-pill px-3">私信</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 地图视图 (默认隐藏) -->
    <div id="mapView" class="d-none">
      <div style="height: 400px; background-color: #e9ecef; border-radius: 12px; margin-bottom: 30px; position: relative;">
        <!-- 简化的地图示意 -->
        <div class="position-absolute top-50 start-50 translate-middle">
          <i class="fa fa-map-o text-secondary" style="font-size: 60px;"></i>
        </div>
        
        <!-- 地图上的会员标记 -->
        <div class="position-absolute top-25 start-25">
          <div class="bg-primary text-white rounded-full w-8 h-8 d-flex align-items-center justify-content-center">
            <i class="fa fa-user"></i>
          </div>
        </div>
        
        <div class="position-absolute top-40 start-60">
          <div class="bg-success text-white rounded-full w-8 h-8 d-flex align-items-center justify-content-center">
            <i class="fa fa-user"></i>
          </div>
        </div>
        
        <div class="position-absolute top-60 start-30">
          <div class="bg-info text-white rounded-full w-8 h-8 d-flex align-items-center justify-content-center">
            <i class="fa fa-user"></i>
          </div>
        </div>
        
        <!-- 自己的位置标记 -->
        <div class="position-absolute top-50 start-50">
          <div class="bg-blue text-white rounded-full w-10 h-10 d-flex align-items-center justify-content-center border-4 border-white">
            <i class="fa fa-location-arrow"></i>
          </div>
        </div>
      </div>
      
      <!-- 地图下方的会员列表 -->
      <div class="bg-white rounded-3 p-3 mb-3">
        <h6 class="fw-bold mb-3">附近的会员</h6>
        <div class="space-y-2">
          <div class="d-flex justify-content-between align-items-center pb-2 border-bottom">
            <div class="d-flex align-items-center">
              <img src="https://picsum.photos/40/40?random=1" class="rounded-circle me-2" width="36" height="36">
              <div>
                <h6 class="mb-0 text-sm fw-medium">张伟</h6>
                <p class="mb-0 text-xs text-secondary">1公里 · 编程</p>
              </div>
            </div>
            <button class="btn btn-sm btn-primary rounded-pill px-3">联系</button>
          </div>
          
          <div class="d-flex justify-content-between align-items-center pb-2 border-bottom">
            <div class="d-flex align-items-center">
              <img src="https://picsum.photos/40/40?random=2" class="rounded-circle me-2" width="36" height="36">
              <div>
                <h6 class="mb-0 text-sm fw-medium">李明</h6>
                <p class="mb-0 text-xs text-secondary">2公里 · 摄影</p>
              </div>
            </div>
            <button class="btn btn-sm btn-primary rounded-pill px-3">联系</button>
          </div>
          
          <div class="d-flex justify-content-between align-items-center">
            <div class="d-flex align-items-center">
              <div class="no-image rounded-circle me-2" width="36" height="36" style="width:36px; height:36px; font-size:16px;">
                <i class="fa fa-user"></i>
              </div>
              <div>
                <h6 class="mb-0 text-sm fw-medium">刘强</h6>
                <p class="mb-0 text-xs text-secondary">3公里 · 运动</p>
              </div>
            </div>
            <button class="btn btn-sm btn-primary rounded-pill px-3">联系</button>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 加载更多 -->
    <div class="text-center py-4">
      <button class="btn btn-outline-secondary rounded-pill px-5">
        <span class="loader me-2"></span>加载更多会员
      </button>
    </div>
  </div>
  
  <!-- 底部导航 -->
  <div class="bottom-nav">
    <div class="container-fluid">
      <div class="row text-center py-3">
        <div class="col-3">
          <a href="#" class="text-primary d-block">
            <i class="fa fa-home fs-5 mb-1"></i>
            <span class="d-block text-xs">首页</span>
          </a>
        </div>
        <div class="col-3">
          <a href="#" class="text-secondary d-block">
            <i class="fa fa-users fs-5 mb-1"></i>
            <span class="d-block text-xs">会员</span>
          </a>
        </div>
        <div class="col-3">
          <a href="#" class="text-secondary d-block">
            <i class="fa fa-bell fs-5 mb-1"></i>
            <span class="d-block text-xs">通知</span>
          </a>
        </div>
        <div class="col-3">
          <a href="#" class="text-secondary d-block">
            <i class="fa fa-user fs-5 mb-1"></i>
            <span class="d-block text-xs">我的</span>
          </a>
        </div>
      </div>
    </div>
  </div>

  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 视图切换功能
    const gridViewBtn = document.getElementById('gridViewBtn');
    const listViewBtn = document.getElementById('listViewBtn');
    const mapViewBtn = document.getElementById('mapViewBtn');
    const gridView = document.getElementById('gridView');
    const listView = document.getElementById('listView');
    const mapView = document.getElementById('mapView');
    
    // 网格视图
    gridViewBtn.addEventListener('click', () => {
      gridView.classList.remove('d-none');
      listView.classList.add('d-none');
      mapView.classList.add('d-none');
      
      gridViewBtn.classList.remove('btn-light');
      gridViewBtn.classList.add('btn-primary');
      listViewBtn.classList.remove('btn-primary');
      listViewBtn.classList.add('btn-light');
      mapViewBtn.classList.remove('btn-primary');
      mapViewBtn.classList.add('btn-light');
    });
    
    // 列表视图
    listViewBtn.addEventListener('click', () => {
      listView.classList.remove('d-none');
      gridView.classList.add('d-none');
      mapView.classList.add('d-none');
      
      listViewBtn.classList.remove('btn-light');
      listViewBtn.classList.add('btn-primary');
      gridViewBtn.classList.remove('btn-primary');
      gridViewBtn.classList.add('btn-light');
      mapViewBtn.classList.remove('btn-primary');
      mapViewBtn.classList.add('btn-light');
    });
    
    // 地图视图
    mapViewBtn.addEventListener('click', () => {
      mapView.classList.remove('d-none');
      gridView.classList.add('d-none');
      listView.classList.add('d-none');
      
      mapViewBtn.classList.remove('btn-light');
      mapViewBtn.classList.add('btn-primary');
      gridViewBtn.classList.remove('btn-primary');
      gridViewBtn.classList.add('btn-light');
      listViewBtn.classList.remove('btn-primary');
      listViewBtn.classList.add('btn-light');
    });
    
    // 筛选面板控制
    const filterBtn = document.getElementById('filterBtn');
    const closeFilterBtn = document.getElementById('closeFilterBtn');
    const filterPanel = document.getElementById('filterPanel');
    const overlay = document.getElementById('overlay');
    
    filterBtn.addEventListener('click', () => {
      filterPanel.classList.add('active');
      overlay.classList.add('active');
    });
    
    closeFilterBtn.addEventListener('click', () => {
      filterPanel.classList.remove('active');
      overlay.classList.remove('active');
    });
    
    overlay.addEventListener('click', () => {
      filterPanel.classList.remove('active');
      overlay.classList.remove('active');
    });
    
    // 快捷分类筛选
    const filterButtons = document.querySelectorAll('.overflow-x-auto .btn');
    filterButtons.forEach(button => {
      button.addEventListener('click', () => {
        filterButtons.forEach(btn => {
          btn.classList.remove('btn-primary');
          btn.classList.add('btn-light');
        });
        button.classList.remove('btn-light');
        button.classList.add('btn-primary');
      });
    });
    
    // 技能标签筛选
    const skillTags = document.querySelectorAll('.badge');
    skillTags.forEach(tag => {
      tag.addEventListener('click', function() {
        skillTags.forEach(t => t.classList.remove('bg-primary'));
        skillTags.forEach(t => t.classList.add('bg-secondary'));
        this.classList.remove('bg-secondary');
        this.classList.add('bg-primary');
      });
    });
    
    // 关注按钮切换状态
    document.querySelectorAll('.btn-outline-primary').forEach(btn => {
      btn.addEventListener('click', function() {
        if (this.textContent.trim() === '关注') {
          this.textContent = '已关注';
          this.classList.add('bg-primary', 'text-white');
        } else {
          this.textContent = '关注';
          this.classList.remove('bg-primary', 'text-white');
        }
      });
    });
  </script>
</body>
</html>
